<template>
  <swiper>
    <swiper-item v-for="(item, index) in banners" :key="index">
      <a :href="item.link">
        <img :src="item.image" alt="" @load="swiperImgLoad">
      </a>
    </swiper-item>
  </swiper>
</template>

<script>
  import {Swiper, SwiperItem} from '@/components/common/swiper'

  export default {
   name: "HomeSwiper",
   components:{
     SwiperItem,
     Swiper,
   },
    data(){
     return {
       isLoad:false
     }
    },
    props:{
     banners:{
       type:Array,
       default(){
         return []
       }
     }
    },
    methods:{
     swiperImgLoad(){
       if(!this.isLoad){
         this.$emit('swiperImgLoad')
          this.isLoad = true
       }
     }
    }
  }
</script>

<style scoped>
  img{
    width: 100%;
    height:100%
  }
</style>